<template>
  <div>
    <router-link tag="div" to="/" class="header-abs" v-show="showAbs">
      <div class="iconfont header-abs-back">&#xe625;</div>
    </router-link>

    <div
      class="header-fixed"
      v-if="!showAbs"
      ref="header"
      :style="opacityStyle"
    >城市详情
        <router-link to="/home">
          <div class=" iconfont header-back">&#xe625;</div>
        </router-link>
    </div>

  </div>

</template>

<script>
    export default {
        name: "Header",
        data(){
          return {
            showAbs:true,
            opacityStyle:{
              opacity:null
            }
          }
        },
        methods:{
          handleShowAbs(){
            let top=document.documentElement.scrollTop;
             if (top > 60){
              let opacity=top/140;
              opacity =opacity>1 ? 1:opacity;
              this.opacityStyle={opacity};

              this.showAbs=false;
               //console.log(this.$refs.header);
            }else{
              this.showAbs=true
            }

          }
        },
        //activated
         mounted (){

          window.addEventListener('scroll',this.handleShowAbs)
        },
      deactivated(){
          console.log("消失，离开了一次");//当页面即将消失时候执行
          window.removeEventListener('scroll',this.handleShowAbs)
      }
    }
</script>

<style  lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .header-abs
     position:absolute
     left:0.2rem
     top:0.2rem
     width:.8rem
     height:.8rem
     border-radius:0.4rem
     background:rgba(0,0,0,0.3)
     text-align:center
     .header-abs-back
        color:#fff
        line-height:0.8rem
  .header-fixed
    z-index:3
    text-align:center
    //height:$headerHeight
    line-height:.86rem
    background-Color:$bgColor
    font-size:.32rem
    color:#fff
    position:fixed
    left:0
    right:0
    top:0
    //height:55rem
    box-sizing:border-box
    .header-back
      position:absolute
      top:0
      left:.1rem
      font-size:.5rem
      color:#fff

</style>
